<script src="../ExternalLibrary/js/vue.js"></script>

<!-------------------------------多行文本输入绑定start:其实就是双向绑定,只是html标签不一样而已 ------------------------------->
<fieldset>
    <legend>01.多行文本输入绑定</legend>
    <div id="multi">
        <span>Multiline message is:</span>
        <p>{{message}}</p>
        <textarea placeholder="add multiple lines" v-model="message"></textarea>
    </div>
    <script>
        var multi = new Vue({
            el:"#multi",
            data:{
               message:"" 
            }
        })
    </script>
</fieldset>
<!-------------------------------多行文本输入绑定end ------------------------------->


<!-------------------------------复选框双向绑定start:其实还是一个双向绑定,只是标签不一样而已 ------------------------------->
<fieldset>
    <legend>02.复选框双向绑定</legend>
    <div id="check">
        <input type="checkbox" v-model="message"><!-- 默认value是true和false -->
        <label>{{message}}</label>
        <script>
            new Vue({
                el:"#check",
                data:{
                    message:false
                }
            })
        </script>
    </div>
</fieldset>
<!-------------------------------复选框双向绑定end ------------------------------->


<!-------------------------------多个复选框双向绑定start:其实还是一个双向绑定,只是标签不一样而已 ------------------------------->
<fieldset>
    <legend>03.多个复选框</legend>
    <div id="checkMulti">
        <input type="checkbox" v-model="checkeds" value="Jack"><!-- 默认value只有真假值,所以要显示声明value的值(value是往后台传的) -->
        <label>Jack</label>
        <input type="checkbox" v-model="checkeds" value="John">
        <label>John</label>
        <span>{{checkeds}}</span>
    </div>
    <script>
        new Vue({
            el:"#checkMulti",
            data:{
                checkeds:[]
            }
        })
    </script>
</fieldset>
<!-------------------------------多个复选框双向绑定end ------------------------------->


<!-------------------------------单选按钮双向绑定start:其实还是一个双向绑定,只是标签不一样而已 ------------------------------->
<fieldset>
    <legend>04.单选按钮01</legend>
    <div id="radio">
        <input type="radio" v-model="picked" value="one"><!-- value默认是空,所以要显示的声明value的值(value是往后台传的) -->
        <input type="radio" v-model="picked" value="two">
        <span>{{picked}}</span>
    </div>
    <script>
        // 通过vue实例区分不同的组
        new Vue({
            el:"#radio",
            data:{
                picked:""
            }
        })
    </script>
</fieldset>
<!-------------------------------单选按钮双向绑定end ------------------------------->


<!-------------------------------单选按钮双向绑定start:其实还是一个双向绑定,只是标签不一样而已 ------------------------------->
<fieldset>
    <legend>05.单选按钮02</legend>
    <div id="radio2">
        <input type="radio" v-model="radio" value="11">
        <input type="radio" v-model="radio" value="22">
        <span>{{radio}}</span>
    </div>
    <script>
        // 通过vue实例区分不同的组
        new Vue({
            el:"#radio2",
            data:{
                radio:""
            }
        })
    </script>
</fieldset>
<!-------------------------------单选按钮双向绑定end ------------------------------->


<!-------------------------------选择框双向绑定start:其实还是一个双向绑定,只是标签不一样而已 ------------------------------->
<fieldset>
    <legend>06.选择框(可以用v-for优化)</legend>
    <div id="select">
        <select v-model="selected"><!-- multiple style="width: 20px" 可以使选择框变大 -->
            <option disabled value="">请选择</option>
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </select>
        <span>{{selected}}</span>
    </div>
    <script>
        new Vue({
            el:"#select",
            data:{
                selected:""
            }
        })
    </script>
</fieldset>
<!-------------------------------选择框双向绑定end ------------------------------->

<!-- 表单输入也有修饰符 -->